<template>
	<x-skeleton type="text" :loading="loading" :configs="listConfigs">
		<view class="result-container">
			<view class="result-content">
				<view class="result-card">
					<view class="result-head">
						<view class="username">
							{{ detail.detail_info.sizhu_info.day.tg }}{{ detail.detail_info.sizhu_info.day.dz }}日生的
							{{ detail.base_info.name }} 是
						</view>
						<view class="result-title">
							{{ getTwelveVal() + '格' }}·{{ mingge }}
						</view>
					</view>
					<view class="result-desc">
						{{ detail.detail_info.sizhu_info.sizhu_indication.mingyun.sanshishu_mingyun }}
					</view>
					<view class="result-info">
						<view class="result-info-wrap">
							<view class="common-head">
								<view class="common-icon shenqiang"></view>
								<view class="common-title">身{{ detail.base_info.xiyongshen.qiangruo[3] }}型</view>
							</view>
							<view class="info-item">
								<text class="label">八字</text>
								<view class="bazi">
									<text
										class="value">【{{ detail.detail_info.sizhu_info.year.tg }}{{ detail.detail_info.sizhu_info.year.dz }}】【{{ detail.detail_info.sizhu_info.month.tg }}{{ detail.detail_info.sizhu_info.month.dz }}】</text>
									<text
										class="value">【{{ detail.detail_info.sizhu_info.day.tg }}{{ detail.detail_info.sizhu_info.day.dz }}】【{{ detail.detail_info.sizhu_info.hour.tg }}{{ detail.detail_info.sizhu_info.hour.dz }}】</text>
								</view>

							</view>
							<view class="info-item">
								<text class="label">天干</text>
								<text class="value">【{{ detail.base_info.xiyongshen.rizhu_tiangan }}】</text>
							</view>
							<view class="info-item">
								<text class="label">喜用神</text>
								<text class="value">【{{ detail.base_info.xiyongshen.xiyongshen }}】</text>
							</view>
							<!-- <view class="info-item">
								<text class="label">五行</text>
								<text class="value">【{{ detail.base_info.xiyongshen.yinyang }}】</text>
							</view> -->
						</view>
						<view class="result-img-wrap">
							<view class="result-img">
								<image class="wx-img" src="https://hxs.dsjhs.com:553/prod-api/profile/wuxingxinxi.png"
									mode=""></image>
								<text
									class="count huo">{{ detail.base_info.xiyongshen.huo_score_percent | toFixed1 }}%</text>
								<text
									class="count tu">{{ detail.base_info.xiyongshen.tu_score_percent | toFixed1 }}%</text>
								<text
									class="count jin">{{ detail.base_info.xiyongshen.jin_score_percent | toFixed1 }}%</text>
								<text
									class="count shui">{{ detail.base_info.xiyongshen.shui_score_percent | toFixed1 }}%</text>
								<text
									class="count mu">{{ detail.base_info.xiyongshen.mu_score_percent | toFixed1 }}%</text>
							</view>
						</view>
					</view>
				</view>

				<view class="card-item">
					<view class="common-head">
						<view class="common-icon rizhu"></view>
						<view class="common-title">日柱论命</view>
					</view>
					<view class="card-content">{{ detail.detail_info.sizhu_info.sizhu_indication.xingge.rizhu }}</view>
				</view>


			</view>

			<view class="result-footer">
				<view class="footer-tip">
					推算理论源于八字命理，仅供国学探究，娱乐使用！
				</view>
				<view class="copyright">
					<image class="code-img" src="https://hxs.dsjhs.com:553/prod-api/profile/erweima.png" mode="">
					</image>
					<view class="copyright-info">
						<view class="info-title">
							看见天性，认识自己！
						</view>
						<view class="info-text">
							在人生这场旅程中，一起来探索你的主线剧情吧！
						</view>
					</view>
				</view>
				<view class="result-btns">
					<button class="card-btn" open-type="share">
						<image class="icon" src="https://hxs.dsjhs.com:553/prod-api/profile/wxicon.png" mode=""></image>
						微信
					</button>
					<button class="share-btn" @tap="handleSave">
						<image class="icon" src="https://hxs.dsjhs.com:553/prod-api/profile/xiazai.png" mode=""></image>
						保存
					</button>
				</view>

			</view>

			<drawcanvas ref="drawcanvas" :isShowImg="isShowImg" :detail="detail"></drawcanvas>
		</view>
	</x-skeleton>
</template>

<script>
	import mixin from './mixin.js'
	import drawcanvas from './drawcanvas.vue'
	export default {
		components: {
			drawcanvas
		},
		mixins: [mixin],
		onReady() {

		},
		onShareAppMessage(res) {
			return {
				title: '国学八字，探究命格',
				path: 'subpage/twelvepattern/index',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		data() {
			return {
				loading: true,
				isShowImg: true,
				detail: {},
				listConfigs: {
					gridRows: 5,
				},
			}
		},
		onLoad(option) {
			const form = decodeURIComponent(option.formData)
			
			setTimeout(() => {
				this.detail = JSON.parse(form)
				this.loading = false
			}, 500)
			console.log(this.detail, 'opt')
		},

		methods: {
			handleSave() {
				this.$refs.drawcanvas.saveImg()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.result-container {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(180deg, #A694EA 0%, #FAF5FF 100%);

		.result-content {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.result-card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 40rpx;
				box-sizing: border-box;

				.result-head {
					width: 100%;
					height: 194rpx;
					// margin-bottom: 56rpx;
					padding: 48rpx 0 0 40rpx;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/juxingtou.png') no-repeat center;
					background-size: 100% 100%;
					box-sizing: border-box;

					.username {
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						line-height: 20px;
						text-align: left;
						margin-bottom: 20rpx;
					}

					.result-title {

						font-weight: 600;
						font-size: 56rpx;
						color: #34314F;
						line-height: 68rpx;
						text-align: left;
					}


				}

				.result-desc {
					max-width: 318px;
					margin-bottom: 56rpx;
					padding-left: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #34314F;
					line-height: 40rpx;
					text-align: left;
					box-sizing: border-box;
				}

				.result-info {
					display: flex;
					flex-wrap: nowrap;
					padding-left: 40rpx;
					padding-right: 28rpx;
					box-sizing: border-box;

					.result-info-wrap {
						width: calc(100% - 162px);

						.info-item {
							display: flex;
							flex-wrap: nowrap;
							margin-bottom: 16rpx;

							.label {
								min-width: 50px;
								text-align: justify;
								text-align-last: justify
							}

							.value {
								width: 112px;
							}

							text {
								display: block;
								font-weight: 400;
								font-size: 28rpx;
								color: #34314F;
								line-height: 20px;
								text-align: left;
							}
						}
					}
					
					.result-img-wrap {
						padding-bottom: 28rpx;
					}
					.result-img {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 162px;
						height: 162px;
						background: url('https://hxs.dsjhs.com:553/prod-api/profile/wuxingbg.png') no-repeat center;
						background-size: 100% 100%;

						.wx-img {
							width: 146px;
							height: 146px;

						}

						.count {
							position: absolute;
							width: 60rpx;
							text-align: center;
							font-size: 20rpx;
							line-height: 28rpx;

							&.huo {
								top: 27px;
								color: #FF4D4F;
							}

							&.tu {
								top: 64px;
								right: 12px;
								color: #B86927;
							}

							&.jin {
								bottom: 17px;
								right: 30px;
								color: #E79320;
							}

							&.shui {
								bottom: 17px;
								left: 30px;
								color: #3F87F3;
							}

							&.mu {
								top: 64px;
								left: 12px;
								color: #13C73D;
							}
						}
					}
				}
			}

			.card-item {
				width: 100%;
				// height: 194px;
				padding: 36rpx 40rpx;
				margin-top: 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 20px;

				.card-content {
					font-weight: 400;
					font-size: 28rpx;
					color: #34314F;
					line-height: 40rpx;
					text-align: left;
				}
			}
		}

		.result-footer {
			width: 100%;
			padding: 0 32rpx 48rpx 32rpx;
			margin-top: 16rpx;
			box-sizing: border-box;

			.copyright {
				display: flex;
				margin-top: 16rpx;
				margin-bottom: 36rpx;

				.code-img {
					display: block;
					width: 80px;
					height: 80px;
					margin-right: 16rpx;
				}

				.copyright-info {
					padding-top: 48rpx;

					.info-title {
						margin-bottom: 8rpx;
						font-weight: 600;
						font-size: 28rpx;
						color: #34314F;
						line-height: 16px;
						text-align: left;
						font-style: normal
					}

					.info-text {
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(11, 15, 18, 0.7);
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.result-btns {
				display: flex;
				flex-wrap: nowrap;

				button {
					display: flex;
					justify-content: center;
					align-items: center;
					width: calc(50% - 10px);
					height: 96rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;
					border-radius: 20px;
					background-color: #fff;

					&::after {
						border: 0;
					}
				}

				.icon {
					width: 24px;
					height: 24px;
					margin-right: 16rpx;
				}

				.share-btn {
					background: #FFDE6D;
				}
			}

			.footer-tip {
				font-weight: 400;
				font-size: 26rpx;
				color: #A694EA;
				line-height: 28px;
				text-align: center;
			}
		}

		.common-head {
			display: flex;
			margin-bottom: 24rpx;

			.common-icon {
				width: 26px;
				height: 26px;

				&.shenqiang {
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/shenxing.png') no-repeat center;
					background-size: 100% 100%;
				}

				&.rizhu {
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/lunming.png') no-repeat center;
					background-size: 100% 100%;
				}

			}

			.common-title {
				margin-left: 20rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #34314F;
				line-height: 25px;
			}
		}
	}
</style>